<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="box">
        <div class="nav">
            <div class="navbox">
                <div class="navimg"><img src="" alt=""></div>
                <div class="luyou">
                    <span><router-link to="/">首页</router-link></span>
                    <span><router-link to="/no2">关于</router-link></span>
                    <span><router-link to="/no3">新闻</router-link></span>
                    <span><router-link to="/no4">联系</router-link></span>
                   
                </div>
                <div class="tubiao">
                    <div class="el-icon-search"></div>
                </div>
            </div>
        </div>
    <div>
        <router-view></router-view>
    </div>
    
    <div class="footer">
        <div  style="margin: auto;width: 1400px;height: 300px;">
            <ul>
                <li>SOftwear</li>
                <li>Copyright  © 2019  软件公司模板 苏ICP备</li>
                <li>0900000001号-3</li>
                <li>1234567890</li>
            </ul>
            <ul>
                <li>联系我们</li>
                <li>电话：+86 123 1234 1234</li>
                <li>邮箱：software@email.com</li>
                <li>地址：深圳市南京路双港码头6楼</li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li>关于我们</li>
                <li>服务支持</li>
                <li>法律和隐私</li>
            </ul>
            <ul>
                <li>关注我们</li>
                <img style="width: 255px;height: 145px;" src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cDovLzVlZTFlY2Y0YzVkOTEudDc0LnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAyMC8wNi8zNDg1ODhmZDhhNGY2NmFlM2NhYzFkMWIxZGMzYmNkNy5qcGc_p_p100_p_3D.jpg" alt="">
            </ul>
        </div>
    </div>
</div>
        <template id="no1">
            <div>
                <div class="gg">
                    <div class="ggbox">
                          <div>
                              <h2>企业数字化平台</h2>
                              <span>打造企业级云原生PaaS+SaaS平台，帮助客户轻松用云、快速创新、持续迭代。</span>
                              <h4>免费体验</h4>
                          </div>
                          <div>
                              <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvNGE5MGQ0N2I3YWU3Mzg5NTg0ZDIyZTEyNmNlYjk4OWQucG5n.png" alt="" class="no2">
                          </div>
                    </div>
                  </div>
                  <div class="concent1" style="background-color: #f7f7f7;">
                    <div class="concent2">
                        <div>
                            <h3>我们的目标</h3>
                           </div>
                           <p>当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为起飞页提供了海量精美网站模板和成品网站。</p>
                    </div>
                  </div>
                  <div class="shijian">
                      <div class="sjbox">
                          <div class="zjbox">
                              <div><img src="" alt="" class="el-icon-alarm-clock"></div>
                              <h2 style="font-size: 22px;line-height: 50px;">省时间</h2>
                              <p style="font-size: 16px;line-height: 25px;">您可以双击这里或者点击编辑按钮来修改内容您还可以添加图标按钮图片等常用元素</p>
                          </div>
                          <div class="zjbox">
                            <div><img src="" alt="" class="el-icon-alarm-clock"></div>
                            <h2 style="font-size: 22px;line-height: 50px;">客制化</h2>
                            <p style="font-size: 16px;line-height: 25px;">您可以双击这里或者点击编辑按钮来修改内容您还可以添加图标按钮图片等常用元素</p>
                        </div>
                        <div class="zjbox">
                            <div><img src="" alt="" class="el-icon-alarm-clock"></div>
                            <h2 style="font-size: 22px;line-height: 50px;">移动端友好</h2>
                            <p style="font-size: 16px;line-height: 25px;">您可以双击这里或者点击编辑按钮来修改内容您还可以添加图标按钮图片等常用元素</p>
                        </div>
                      </div>
                      
                  </div>
                  <div class="lj">
                      <div class="ljbox">
                          <div class="lsbox">
                            <h4>看看我们的价值观</h4>
                            <h2>进一步了解我们</h2>
                            <div class="el-icon-video-play"></div>
                          </div>
                      </div>
                  </div>
                  <div class="youshi">
                        <div class="ysbox">
                            <div class="ysleft">
                                <img class="no2" src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvZmNmM2EzOGQ3OWE1MWU2NzE1MzlkMTYzMWE2OWJmOGMucG5n.png" alt="">
                            </div>
                            <div class="ysright">
                                <h2>软件平台核心优势</h2> 
                                <p>当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案、自由拖拽的可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。</p>
                                <ul>
                                    <li>我们的价值观是什么</li>
                                    <li>我们的价值观是什么</li>
                                    <li>我们的价值观是什么</li>
                                    <li>我们的价值观是什么</li>
                                </ul>
                                
                            </div>
                        </div>
                  </div>
                  <div class="fw">
                      <div class="fwbox">
                          <div class="fwleft">
                            <h2>为什么要选择我们的服务</h2> 
                            <ul>
                                <li>我们的价值观是什么</li>
                                <li>我们的价值观是什么</li>
                                <li>我们的价值观是什么</li>
                                <li>我们的价值观是什么</li>
                            </ul>
                            <p>当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。</p>
                          </div>
                          <div class="fwright">
                              <img class="no2" src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvMTZhMmY5NDQ2ZTI5NGVjNjU0ODhkNTdjNDJmZWU4N2MucG5n.png" alt="">
                          </div>

                      </div>
                  </div>
                  <div class="dingzhi">
                      <div class="dzbox">
                        <h2>软件平台核心优势</h2> 
                        <p>当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案、自由拖拽的可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。</p>
                      </div>
                      <div class="jgbox" style="width: 1360px; height: 469px;margin: auto;margin-top: 50px;">
                          <div class="jg">
                               <h2>基础版</h2> 
                               <strong style="font-size: 40px;color: greenyellow;">￥59</strong><span>/年</span>
                               <ul style="border-top: 1px solid red;margin-top: 30px;">
                                   <li><strong style="font-size: 40px;color: greenyellow;">√ </strong>赠送国际域名</li>
                                   <li><strong style="font-size: 40px;color: greenyellow;">√ </strong>赠送国际域名</li>
                                   <li><strong style="font-size: 40px;color: greenyellow;">√ </strong>赠送国际域名</li>
                                   <li><strong style="font-size: 40px;color: greenyellow;">√ </strong>赠送国际域名</li>
                                   <li><strong style="font-size: 40px;color: greenyellow;">√ </strong>赠送国际域名</li>                
                               </ul>
                               <h3>立即购买</h3>
                          </div>
                          <div class="jg">
                            <h2>企业版</h2> 
                            <strong style="font-size: 40px;color: greenyellow;">￥239</strong><span>/年</span>
                            <ul style="border-top: 1px solid red;margin-top: 30px;">
                                <li><strong style="font-size: 40px;color: greenyellow;">√ </strong>赠送国际域名</li>
                                <li><strong style="font-size: 40px;color: greenyellow;">√ </strong>赠送国际域名</li>
                                <li><strong style="font-size: 40px;color: greenyellow;">√ </strong>赠送国际域名</li>
                                <li><strong style="font-size: 40px;color: greenyellow;">√ </strong>赠送国际域名</li>
                                <li><strong style="font-size: 40px;color: greenyellow;">√ </strong>赠送国际域名</li>                
                            </ul>
                            <h3>立即购买</h3>
                       </div>
                       <div class="jg">
                        <h2>专业版</h2> 
                        <strong style="font-size: 40px;color: greenyellow;">￥559</strong><span>/年</span>
                        <ul style="border-top: 1px solid red;margin-top: 30px;">
                            <li><strong style="font-size: 40px;color: greenyellow;">√ </strong>赠送国际域名</li>
                            <li><strong style="font-size: 40px;color: greenyellow;">√ </strong>赠送国际域名</li>
                            <li><strong style="font-size: 40px;color: greenyellow;">√ </strong>赠送国际域名</li>
                            <li><strong style="font-size: 40px;color: greenyellow;">√ </strong>赠送国际域名</li>
                            <li><strong style="font-size: 40px;color: greenyellow;">√ </strong>赠送国际域名</li>                
                        </ul>
                        <h3>立即购买</h3>
                   </div>
                      </div>
                  </div>
                  <div class="td">
                    <div class="tdbox">
                        <h2>我们的团队</h2>
                        <p>您可以尽情向我们的设计部门提出您的需求，大胆的选择您的主题色</p>
                    </div>
                    <div class="tuandui"> 
                        <div class="minbox">
                            <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvNjhmYmM1NDkxYjM3YzE4OTNmNmNkZDQ5YmQ4ODEyNjYtNTMzeDQwMC5qcGc_p_p100_p_3D.jpg" alt="">
                            <h2>张迪特</h2>
                            <strong>设计师</strong>
                            <p>1234567890</p>
                        </div>
                        <div class="minbox">
                            <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvNTY2MTFhMDAxN2QwZmQ1NGI5ODA2YjJjYzllYzYyZTAtNTMzeDQwMC5qcGc_p_p100_p_3D.jpg" alt="">
                            <h2>张迪特</h2>
                            <strong>设计师</strong>
                            <p>1234567890</p>
                        </div>
                        <div class="minbox">
                            <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvOTA1ZTQ0N2Q3YjFjYzBkMTA2OWY5MDNlNTUwNzFhYTMtNTMzeDQwMC5qcGc_p_p100_p_3D.jpg" alt="">
                            <h2>张迪特</h2>
                            <strong>设计师</strong>
                            <p>1234567890</p>
                        </div>
                    </div>
                </div>
                <div class="foot" style="margin-top: 200px;">
                    <div class="footbox">
                            <h2>注册并获得折扣</h2>
                            <p>您可以双击这里或者点击编辑按钮来修改内容您还可以添加图标按钮图片等常用元素
                            </p>
                            <h4>免费试用</h4>
                    </div>
                </div>
            </div>
            
        </template>
        <template id="no2">
            <div>
                <div class="two1">
                    <div class="twobox">
                        <div class="twoleft">
                            <h2>公司简介</h2>
                            <p>当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。
                            </p>
                            <p>专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为起飞页提供了海量精美网站模板和成品网站。</p>
                        </div>
                        <div class="tworight">
                            <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvNGUwNGMyZjFjNDk2ZDU4Y2FiZTc4MTFmNTA1YmY4N2YuanBn.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="two2">
                    <div class="tbox2">
                       <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDUvMTQ2ZGRiN2IxMTJiOWFkY2E5YzJiMzUwN2FjYzFlYzktMjYweDcwLnBuZw_p_p100_p_3D_p_p100_p_3D.png" alt="">
                       <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDUvY2Q5OGU1NzBiN2MxOTczZDFlOWU0NGMxMDVkYjk0NDAtMjYweDcwLnBuZw_p_p100_p_3D_p_p100_p_3D.png" alt="">
                       <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDUvNzczNzE5MWM5N2YwZDgyOTgzYzg2ODlmZmY4NTk3N2MtMjYweDcwLnBuZw_p_p100_p_3D_p_p100_p_3D.png" alt="">
                       <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDUvODkzODMxZDVhYjNiYzlkOTc2MTY3YjBiMDJiZTM0NmMtMjYweDcwLnBuZw_p_p100_p_3D_p_p100_p_3D.png" alt="">
                       <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDUvMTQ2ZGRiN2IxMTJiOWFkY2E5YzJiMzUwN2FjYzFlYzktMjYweDcwLnBuZw_p_p100_p_3D_p_p100_p_3D.png" alt="">
                       <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDUvY2I2OTBkMDY2NGI3MWE3MTcwOWM1NjA1ZjE1YTZmNmEtMjYweDcwLnBuZw_p_p100_p_3D_p_p100_p_3D.png" alt="">
                       <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDUvYjZhMWYwZTA2OTdhMTgyZDkwYzZmZDAyMWM3MzcwZTItMjYweDcwLnBuZw_p_p100_p_3D_p_p100_p_3D.png" alt="">
                       <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDUvNzlmZjUyYmFlNzQ4MWUwYTgyNzk1MTUzMjI0ZmZlNzEtMjYweDcwLnBuZw_p_p100_p_3D_p_p100_p_3D.png" alt="">
                       <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDUvZGVmNzZmZWQ2YzRmZWY3Y2I2NWI3OTNmMTJjZDg1ZjgtMjYweDcwLnBuZw_p_p100_p_3D_p_p100_p_3D.png" alt="">
                       <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDUvMTViNWNjNThkNzE5ZDk0ODU2M2M5MWRkYWRmMTRkNzAtMjYweDcwLnBuZw_p_p100_p_3D_p_p100_p_3D.png" alt="">

                    </div>
                </div>
                <div class="two3">
                    <div>
                        <h3>我们的业务宗旨是客户的满意</h3>
                        <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvNTIyMDZmYTJiZDE3Mjg4NDBhMTQzZTg1N2JhYzI3Y2YucG5n.png" alt="">
                    </div>
                </div>
            </div>
        </template>
        <template id="no3">
            <div>
                
            </div>
        </template>
        <template id="no4">
            <div>
             <div class="five">
                 <h3>联系信息</h3>
             </div>
             <div class="saiwen">
                 <div class="swbox">
                     <ul>
                         <li><img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvNmNlNGZmMjM2ZWFjYTQzYjk5ZDA3NTJiZDUwMmIzMmItNzB4NzAucG5n.png" alt=""></li>
                         <li>中国 广东省 深圳市</li>
                         <li>南京路双港码头6楼</li>
                     </ul>
                     <ul>
                        <li><img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvNmNlNGZmMjM2ZWFjYTQzYjk5ZDA3NTJiZDUwMmIzMmItNzB4NzAucG5n.png" alt=""></li>
                        <li>(1239) 222.444</li>
                        <li>example@example.org</li>
                    </ul>
                    <ul>
                        <li><img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvNmNlNGZmMjM2ZWFjYTQzYjk5ZDA3NTJiZDUwMmIzMmItNzB4NzAucG5n.png" alt=""></li>
                        <li>Mon-Fri: 8:00 - 16:00</li>
                        <li>Sat-Sun: Closed</li>
                    </ul>
                 </div>
             </div>
             <div class="five" >
                <h3 style="width: 252px;">随时联系我们</h3>
            </div>
            <div class="six" style="width: 934px;height: 500px;margin: auto;">
                <input type="text" value="姓名">
                <input type="text" value="邮箱">
                <input type="text" value="留言">
                <h3>请求报总价</h3>
            </div>

            
        </div>
        </template>
        

    <script src="./vue.js"></script>
   <script src="./vue-router.js"></script>
    <script src="./index.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   
</body>
</html>